<script setup lang="ts">
import { Icon } from '@iconify/vue'

defineProps<{
  params: object
}>()
function convData(data: any) {
  const date = new Date(data)
  return date.toLocaleString()
}
</script>

<template>
  <PageMain>
    <div class="box">
      <el-card style="width: 480px;" shadow="never">
        <template #header>
          <div class="card-header">
            <span>识别记录详细信息 </span>
          </div>
        </template>
        <el-descriptions
          direction="vertical"
          :column="2"
          size="large"
          border
        >
          <el-descriptions-item label="识别种类">
            <template #label>
              <span>
                <Icon icon="icon-park:rabbit" />
                识别种类
              </span>
            </template>
            <div style="font-size: 50px;color: royalblue;text-align: center;">
              {{ params.info.ResultType }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="识别图片">
            <template #label>
              <span>
                <Icon icon="icon-park:image-files" />
                识别图片
              </span>
            </template>
            <div class="img-box">
              <ImagePreview :src="params.info.ImageURL" style="width: 150px;height: 150px;" />
            </div>
          </el-descriptions-item>

          <el-descriptions-item label="识别算法">
            <template #label>
              <span>
                <Icon icon="icon-park:cpu" />
                识别算法
              </span>
            </template>
            <el-link class="text-box" type="warning">
              {{ params.info.AlgorithmUsed }}
            </el-link>
          </el-descriptions-item>
          <el-descriptions-item label="识别时间">
            <template #label>
              <span>
                <Icon icon="icon-park:time" />
                识别时间
              </span>
            </template>
            <el-link class="text-box" type="primary">
              {{ convData(params.info.CreateTime) }}
            </el-link>
          </el-descriptions-item>
          <el-descriptions-item label="识别设备">
            <template #label>
              <span>
                <Icon icon="icon-park:devices" />
                识别设备
              </span>
            </template>
            <el-link class="text-box" type="info">
              {{ params.info.Device }}
            </el-link>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </PageMain>
</template>

<style scoped>
  .box {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .img-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text-box {
    font-size: 18px;
    text-align: center;
  }
</style>
